<template>
  <div class="user-info">
    <header>
      <section class="user-title" v-if="isLogin">
        <div class="user-img">
          <img src="/logo.png" />
        </div>
        <span>username</span>
      </section>
      <section class="user-login" v-if="!isLogin">
        <div>
          <span>登录后可享受</span><br />
          <span>更多贴心功能</span>
        </div>

        <button @click="handleLongin">登录</button>
      </section>

      <i class="iconfont icon-bianji" v-if="isLogin"></i>
    </header>
    <section class="setting">
      <ul>
        <li v-for="(item, index) in settingList" :key="index">
          <i :class="['iconfont', `icon-${item.icon}`]"></i>
          <span>{{ item.text }}</span>
        </li>
      </ul>
    </section>
  </div>
  <LoginPage
    @close="handleCloseLoginPage"
    v-if="isshowLoginPage"
    :loginUsername="loginUsername"
    :isLogin="isLogin"
  />
</template>

<script setup>
import { ref } from 'vue'
let loginUsername = ref('') // 子组件登录成功后更新登录用户名
let isLogin = ref(false) //子组件登录成功后更新
let isshowLoginPage = ref(false)
const handleLongin = () => {
  if (!isLogin.value && !isshowLoginPage.value) {
    isshowLoginPage.value = true
  }
}

const handleCloseLoginPage = () => {
  isshowLoginPage.value = false
}

const settingList = [
  {
    icon: 'iconlushu',
    text: '路书',
  },
  {
    icon: 'wenjianjia',
    text: '我的收藏',
  },
  {
    icon: 'shoucang',
    text: '收藏点显示于图面',
  },
  {
    icon: 'zhuti_tiaosepan',
    text: '主题',
  },
  {
    icon: 'tuichu',
    text: '退出登录',
  },
]
</script>

<style lanag="scss" scoped>
.user-info {
  position: fixed;
  top: 80px;
  right: 10px;
  width: 250px;
  height: 325px;
  border-radius: 5px;
  background: #fff;
  header {
    height: 68px;
    color: #fff;
    display: flex;
    background: #52acf6;
    border-radius: 5px 5px 0 0;
    justify-content: space-between;

    padding: 0 20px;
    align-items: center;

    .user-title {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 68px;
      gap: 10px;
      .user-img {
        width: 34px;
        height: 34px;
        border-radius: 50%;
        border: 2px solid #fff;
        background: #fff;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
    .user-login {
      display: flex;
      width: 100%;
      justify-content: space-between;
      align-items: center;
      div {
        display: flex;
        flex-direction: column;
      }
      button {
        cursor: pointer;
        padding: 5px 30px;
        background: transparent;
        color: #fff;
        border: 1px solid #fff;
        border-radius: 3px;
      }
    }
  }
  .setting {
    padding: 20px;
    ul {
      display: flex;
      flex-direction: column;
      gap: 20px;
      li {
        cursor: pointer;
        font-size: 13px;
        height: 20px;
        color: #666;
        .iconfont.icon-shoucang {
          color: 'gold' !important;
          &:hover {
            color: 'gold' !important;
          }
        }
        &:hover {
          color: #52acf6;
        }
        i {
          margin-right: 10px;
        }
      }
    }
  }
}
</style>
